<template>
  <div>
    <el-container style="height: 600px;">
      <el-header style="text-align: right; font-size: 12px">
        <el-breadcrumb separator="/" style=" width: 500px;float: left;height: 60px ;line-height: 60px">
          <el-breadcrumb-item :to="{ path: '/studentInfo' }"><strong style="cursor: pointer">首页</strong></el-breadcrumb-item>

        </el-breadcrumb>
        <el-button @click="insertEmployee" style="text-align: left;">新增</el-button>
        <el-dropdown>
          <span style="cursor: pointer">{{$store.state.empName}}<i class="el-icon-arrow-down "  style=" cursor: pointer" ></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </el-header>
      <!--    搜索框-->
      <div style="margin: 15px">
        <!--      员工姓名-->
        <span style="float: left;text-align: center;align-content: center;height: 40px;line-height: 40px">员工姓名&nbsp;</span>
        <el-input v-model="chaxun.empName" placeholder="员工姓名"style="width: 10%;float: left"></el-input>
        <!--      员工姓名-->
        <span style="float: left;text-align: center;align-content: center;height: 40px;line-height: 40px">员工学历&nbsp;</span>
        <el-select v-model="chaxun.educationBackground" placeholder="员工状态" style="width: 10%;float: left">
          <el-option label="大专" value="1"></el-option>
          <el-option label="本科" value="2"></el-option>
          <el-option label="硕士" value="3"></el-option>
          <el-option label="博士" value="4"></el-option>
        </el-select>
        <!--      班级状态-->
        <span style="float: left;text-align: center;align-content: center;height: 40px;line-height: 40px">员工状态&nbsp;</span>
        <el-select v-model="chaxun.empStatus" placeholder="员工状态" style="width: 10%;float: left">
          <el-option label="在职" value="1"></el-option>
          <el-option label="离职" value="2"></el-option>
          <el-option label="开除" value="3"></el-option>
          <el-option label="其他" value="4"></el-option>
        </el-select>
        <el-button @click="searchEmployee()" style="float: left" type="primary" icon="el-icon-search">搜索</el-button>
        <el-button @click="selectAll()" style="float: left;align-content: center" icon="el-icon-refresh">重置</el-button>
      </div>
        <!--  表数据-->
        <el-main>
          <el-table :data="page.records" border >
            <el-table-column prop="empId" label="员工编号" ></el-table-column>
            <el-table-column prop="empName" label="员工姓名" ></el-table-column>
            <el-table-column prop="sex" label="员工性别" >
              <template slot-scope="scope">
                <span>{{showSex(scope.row)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="age" label="员工年龄" ></el-table-column>
            <el-table-column prop="birthDate" label="出生日期" ></el-table-column>
            <el-table-column prop="identityCard" label="身份证号" ></el-table-column>
            <el-table-column prop="moblie" label="手机号码" ></el-table-column>
            <el-table-column prop="nativePlace" label="家庭住址" ></el-table-column>
            <el-table-column prop="currentResidence" label="现居地址" ></el-table-column>
            <el-table-column prop="deptId" label="部门编号" ></el-table-column>
            <el-table-column prop="hiredate" label="入职日期" ></el-table-column>
            <el-table-column prop="educationBackground" label="员工学历" >
              <template slot-scope="scope">
                <span>{{showEducation(scope.row)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="graduationSchool" label="毕业学校" ></el-table-column>
            <el-table-column prop="major" label="员工专业" ></el-table-column>
            <el-table-column prop="resumeInformation" label="简历信息" ></el-table-column>
            <el-table-column prop="empStatus" label="员工状态" >
              <template slot-scope="scope">
                <span>{{showStatus(scope.row)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注" ></el-table-column>
            <el-table-column label="操作" >
              <template slot-scope="scope">
                <a href="#" @click="updateEmployee(scope.row)">修改</a>
                <a href="#" @click="deleteEmployee(scope.row)">删除</a>
              </template>
            </el-table-column>
          </el-table>
          <!--      分页控件-->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="[5, 8, 10, 12]"
              :page-size="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total">
            </el-pagination>
          </div>
        </el-main>
      <!--    添加/修改员工信息-->
      <el-dialog
        title="员工信息管理"
        :visible.sync="insertEmployeeDialogVisible"
        width="50%"
        :before-close="handleClose">
        <div id="employeeChangeForm">
          <span v-if="employee.empId!=null">员工编号</span>
          <el-input v-model="employee.empId" placeholder="员工编号" v-if="employee.empId!=null" style="width: 220px"></el-input><br>
          <span>员工姓名</span>
          <el-input v-model="employee.empName" placeholder="员工姓名" style="width: 220px"></el-input><br>
          <span>员工性别</span>
          <el-select v-model="employee.sex" placeholder="员工性别">
            <el-option label="女" value="0">女</el-option>
            <el-option label="男" value="1">男</el-option>
          </el-select>
          <br>
          <span>员工年龄</span>
          <el-input v-model="employee.age" placeholder="员工年龄" style="width: 220px"></el-input><br>
          <div class="block" >
            <span class="demonstration">出生日期</span>
            <el-date-picker
              v-model="employee.birthDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <span>身份证号</span>
          <el-input v-model="employee.identityCard" placeholder="身份证号" style="width: 220px"></el-input><br>
          <span>手机号码</span>
          <el-input v-model="employee.moblie" placeholder="手机号码" style="width: 220px"></el-input><br>
          <span>家庭住址</span>
          <el-input v-model="employee.nativePlace" placeholder="家庭住址" style="width: 220px"></el-input><br>
          <span>现居地址</span>
          <el-input v-model="employee.currentResidence" placeholder="现居地址" style="width: 220px"></el-input><br>
          <span>部门编号</span>
          <el-input v-model="employee.deptId" placeholder="部门编号" style="width: 220px"></el-input><br>
          <div class="block" >
            <span class="demonstration">入职日期</span>
            <el-date-picker
              v-model="employee.hiredate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <span>员工学历</span>
          <el-select v-model="employee.educationBackground" placeholder="员工学历">
            <el-option label="大专" value="1">大专</el-option>
            <el-option label="本科" value="2">本科</el-option>
            <el-option label="硕士" value="3">硕士</el-option>
            <el-option label="博士" value="4">博士</el-option>
          </el-select>
          <br>
          <span>毕业学校</span>
          <el-input v-model="employee.graduationSchool" placeholder="毕业学校" style="width: 220px"></el-input><br>
          <span>员工专业</span>
          <el-input v-model="employee.major" placeholder="员工专业" style="width: 220px"></el-input><br>
          <span>简历信息</span>
          <el-input v-model="employee.resumeInformation" placeholder="简历信息" style="width: 220px"></el-input><br>
          <span>员工状态</span>
          <el-select v-model="employee.empStatus" placeholder="员工状态">
            <el-option label="在职" value="1">在职</el-option>
            <el-option label="离职" value="2">离职</el-option>
            <el-option label="开除" value="3">开除</el-option>
            <el-option label="其他" value="4">其他</el-option>
          </el-select>
          <br>
          <span>其他备注</span>
          <el-input v-model="employee.remarks" placeholder="其他备注" style="width: 220px"></el-input><br>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="employeeDialogCancel">取 消</el-button>
        <el-button type="primary" @click="employeeDialogCommit">确 定</el-button>
      </span>
      </el-dialog>
    </el-container>
  </div>
</template>
<script>
import instance from "../../utils/request";//引入axios实例
export default {
  name: "Employee",
  data(){
    return{
      page: {//页面对象
        current:1,//当前页码
        size:5,//页面大小
        total:0,//数据总条数
        records:{}//数据
      },
      employee:{},
      insertEmployeeDialogVisible: false,
      chaxun:{}//条件对象
    }
  },
  methods:{
    showSex(row,column){
      let sex='';
      if (row.sex==1){
        sex='男';
      }else{
        sex='女';
      }
      return sex;
    },
    showEducation(row,column){
      let educationBackground='';
      switch (row.educationBackground) {
        case 1:
          return '大专'
        case 2:
          return '本科'
        case 3:
          return '硕士'
        case 4:
          return '博士'
      }
      return educationBackground;
    },
    showStatus(row,column){
      let empStatus='';
      switch (row.empStatus){
        case 1:
          return '在职'
        case 2:
          return '离职'
        case 3:
          return '开除'
        case 4:
          return '其他'
      }
      return empStatus;
    },
    searchEmployee(){
      //按条件查询获取员工信息分页形式
      this.chaxun.current = this.page.current;
      this.chaxun.pageSize = this.page.size;
      instance.post("/employee/chaxun",this.chaxun).then(res => {
        this.page = res.data;//查询数据并赋值
      });
    },
    updateEmployee(row){
      this.employee.empId = row.empId;
      instance.get("/employee/"+row.empId).then(res=>{
        this.employee = res.data;
      });
      this.insertEmployeeDialogVisible = true;
    },
    deleteEmployee(row){
      instance.delete("/employee/"+row.empId).then(res=>{
        if (res.data>0){
          this.$message("删除员工成功!");
          this.selectAll();
          this.$router.push({name:'Employee'});
        }else {
          this.$message("删除员工失败!");
        }
      });
      this.selectAll();
    },
    insertEmployee(){
      this.employee = {};
      this.insertEmployeeDialogVisible = true;
    },
    employeeDialogCancel(){
      this.$message("已取消!");
      this.employee = {};//清空表单
      this.insertEmployeeDialogVisible = false;//隐藏弹出窗
    },
    employeeDialogCommit(){//添加或修改员工信息
      instance.post("/employee",this.employee).then(res=>{
        if (res.data>0){//受影响行数>0表示成功
          this.$message("提交成功!");
          this.selectAll();
          this.employee = {};//清空表单
          this.insertEmployeeDialogVisible = false;//隐藏弹出窗
          this.getEmployee();//重新加载员工信息
        }else {
          this.$message("提交失败!");
          this.employee = {};//清空表单
          this.insertEmployeeDialogVisible = false;//隐藏弹出窗
          this.getEmployee();//重新加载员工信息
        }
      });
    },
    handleSizeChange(val) {//分页控件 改变页面大小时执行
      this.page.size = val;
      if (Object.keys(this.chaxun).length == 0){
        this.selectAll();
      }else {
        this.searchEmployee();
      }
    },
    handleCurrentChange(val) {//分页控件 改变当前页码时执行
      this.page.current = val;
      if (Object.keys(this.chaxun).length == 0){
        this.selectAll();
      }else {
        this.searchEmployee();
      }
    },
    handleClose(done) {//X关闭对话框
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    selectAll(){
      this.chaxun = {};//清空条件
      //获取所有员工信息分页形式
      instance.get("/employee/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page = res.data;//查询数据并赋值
        console.log(this.page);
      });
    }
  },
  created() {
    this.selectAll();
    if (this.$store.state.roleId == 0){
      this.$message('请先登录');
      this.$router.push({name:'Login'});
    }
  }
}
</script>
<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
a {
  color: #42b983;
}
</style>
